<template>
  <div id="pointAward">
    <c-title :hide="false" :text="!other ? info.name : '见点奖励'"></c-title>
    <div class="headBox" v-if="info">
      <div class="img">
        <img :src="info.avatar" alt="" />
      </div>
      <div class="user">
        <div class="name">{{ info.nickname }}</div>
        <div class="leave" v-if="info.level">{{ info.level }}</div>
      </div>
    </div>
    <div class="contenbox">
      <div class="topconten">
        <div class="topconten_left">{{ info.name?`累计${info.name}`:'累计见点极差奖励' }}</div>
        <div class="topconten_right" v-if="info.sum">{{ $i18n.t("money") }}{{ info.sum }}</div>
      </div>
      <van-tabs type="card" v-model="record_status" @change="tapchange">
        <van-tab title="全部"></van-tab>
        <van-tab title="已结算"></van-tab>
        <van-tab title="未结算"></van-tab>
      </van-tabs>
      <div class="list">
        <div class="lis" v-for="item in list" :key="item.id">
          <div class="lisTop">
            <div class="sn" v-if="!other">{{ item.order_sn }}</div>
            <div class="sn" v-else-if="other && item.belongs_to_order">{{ item.belongs_to_order.order_sn }}</div>
            <div class="price">{{ $i18n.t("money") }}{{ item.amounts }}</div>
          </div>
          <div class="lisBottom">
            <div class="time">奖励时间：{{ item.created_at }}</div>
            <div class="txt" v-show="record_status == 0">{{ item.status_name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      list: [],
      info: [],
      record_status: 0,
      other: false,
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    window.scrollTo(0,0)
    if (this.$route.params.key == "other") {
      this.other = true;
    }
    this.getData();
  },
  methods: {
    tapchange() {
      this.init();
      this.getData();
    },
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 1;
      this.list = [];
    },
    getData() {
      let urls = "plugin.jyk-find-point.frontend.controllers.rewards.index";
      if (this.other) {
        urls = "plugin.jyk-find-point.frontend.controllers.others.index";
      }
      $http
        .get(
          urls,
          {
            page: this.page,
            record_status: this.record_status
          },
          "生成中"
        )
        .then(response => {
          if (response.result === 1) {
            this.info = response.data.info;
            if(!this.other){
              this.fun.setWXTitle(this.info.name)
            }
            this.isLoadMore = true;
            this.total_page = response.data.list.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            if (this.other) {
              this.fun.setWXTitle(this.info.name);
            }
            this.list = response.data.list.data;
          } else {
            this.posterShow = false;
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      let urls = "plugin.jyk-find-point.frontend.controllers.rewards.index";
      if (this.other) {
        urls = "plugin.jyk-find-point.frontend.controllers.others.index";
      }
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            urls,
            {
              page: this.page,
              record_status: this.record_status
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                let myData = response.data.list.data;
                this.list = this.list.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
              }
            },
            response => {
              Toast(response.msg);
            }
          )
          .catch(err => {
            console.error(err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#pointAward {
  background: #f7f8fb;
  min-height: 100vh;
}

.list {
  display: flex;
  flex-direction: column;
  margin-top: 0.88rem;
  padding-bottom: 2rem;

  .lis {
    margin-bottom: 0.63rem;
    width: 22.19rem;
    background-color: #fff;
    border-radius: 0.31rem;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.84rem;

    .lisTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.3rem;

      .sn {
        text-align: left;
        font-size: 0.81rem;
        color: #2b2b2b;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        font-size: 0.81rem;
        color: #f14e4e;
      }
    }

    .lisBottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .txt {
        font-size: 0.69rem;
        font-weight: bold;
        color: #696969;
      }

      .time {
        text-align: left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.69rem;
        font-weight: bold;
        color: #696969;
      }
    }
  }
}

.contenbox {
  margin: 0.63rem;
  margin-top: -1.25rem;

  .topconten {
    margin-bottom: 1.13rem;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 0.31rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.81rem;
    font-size: 0.81rem;

    .topconten_left {
      color: #282828;
    }

    .topconten_right {
      color: #f14e4e;
    }
  }
}

.headBox {
  background: #ff8924;
  width: 100%;
  height: 7.47rem;
  display: flex;
  align-items: center;
  padding-left: 0.97rem;
  box-sizing: border-box;

  .user {
    overflow: hidden;
    height: 3.44rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    .leave {
      color: #ba750c;
      font-size: 0.69rem;
      padding: 0.28rem 0.59rem;
      border-radius: 0.67rem;
      background: #fff;
    }

    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      font-size: 1rem;
      color: #fff;
      font-weight: 600;
      text-align: left;
    }
  }

  .img {
    width: 3.44rem;
    height: 3.44rem;
    border-radius: 100%;
    margin-right: 0.44rem;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
}
</style>